﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <h1>1.自定义事件-子传父</h1>
    <h2>
        使用 $on(eventName) 监听事件
    </h2>
    <h2>使用 $emit(eventName) 触发事件</h2>

    <div id="counter-event-example">
        <p>{{total}}</p>
        <!--父组件通过监听，来获取到这个广播信号 increment ，然后触发 incrementTotal 方法-->
        <button-counter v-on:increment="incrementTotal"></button-counter>
    </div>
    <div id="app">
        <!--<input v-model="somthing" :value="somthing" @input="something = $event.target.value" />-->
        <custom-input :value="something" @input="something = arguments[0]"> </custom-input>
        <br />
        {{something}}
    </div>
    <br />

    <h1>2.使用插槽slot分发内容</h1>
    <div id="test1">
        <child-component>你好吗！</child-component>
        <child-comp>
            <template slot="boy">
                <strong>帅气、才实</strong>
            </template>
            <template slot="girl">
                <p style="color:red;">漂亮、美丽、购物、逛街</p>
            </template>
            <div>
                <a href='#'>
                    我是一个没有表情的 a 标签
                </a>
            </div>
        </child-comp>


    </div>
    
    <script src="js/vue.js"></script>
    <script>
        Vue.component('button-counter',{
            template: '<button v-on:click="incrementCounter">{{counter}}</button>', /*子组件内，有一个click，当点击的时候 触发 incrementCounter 方法*/
            data() {
                return {
                    counter: 0
                }
            },
            methods: {
                incrementCounter: function () {
                    this.counter += 1;
                    //方法被触发以后，向父组件 发送一个信号广播，并传递参数 counter，名字就是 increment。
                    this.$emit('increment', this.counter);
                }
            },
            mounted() { //常用，挂载完成后执行
                this.incrementCounter();
            }
        })

        var x=new Vue({
            el: '#counter-event-example',
            data: {
                total: 0
            },
            methods: {
                incrementTotal(counter) {
                    this.total = counter; /*incrementTotal 被触发，获取到参数 counter 值，执行相应的操作*/
                }
            }
        })

        Vue.component('custom-input', {
            props: ['something'],  /*父键值传给子建*/
            template: '<input type="text"  v-bind:value="something" v-on:input="updateValue($event.target.value)"/>',
            methods: {
                updateValue(value) {
                    this.$emit('input', value);
                }
            }
        })
        var v =new Vue({
            el: '#app',
            data: {
                something:''
            }
        })

        Vue.component('child-component', {
            //默认插槽 slot,相当于把（你好吗！）展示出来
            template:`
                 <div>
                    Hello,World!
                    <slot>
                    </slot>
                </div>  
                  `
        })

        Vue.component('child-comp', {
            template: `
                        <div>
                            <h4>Header.vue</h4>
                            <slot name="girl"></slot>
                            <div style="height:1px;background-color:red;"></div>
                            <slot name="boy"></slot>
                            <div style="height:1px;background-color:black;"></div>
                            <slot></slot>
                        </div>
                `
        });

        var test = new Vue({
            el: '#test1',
            data: {
                lists: [
                    { id: 1, name: '孙悟空' },
                    { id: 2, name: '猪八戒' },
                    { id: 3, name: '沙和尚' },
                    { id: 4, name: '唐僧' },
                    { id: 5, name: '小白龙' },
                ]
            }
        })
    </script>
</body>
</html>